import React, { useState, useEffect } from 'react';
import { Spin } from 'antd';

interface StreamTextProps {
  text: string;
  isStreaming?: boolean;
  showCursor?: boolean; // 是否显示光标
  className?: string;
}

const StreamText: React.FC<StreamTextProps> = ({
  text,
  isStreaming = false,
  showCursor = true,
  className = '',
}) => {
  const [displayText, setDisplayText] = useState('');
  const [showTypingCursor, setShowTypingCursor] = useState(false);

  useEffect(() => {
    if (isStreaming) {
      // 流式传输中，直接显示文本
      setDisplayText(text);
      setShowTypingCursor(true);
    } else {
      // 流式传输完成，可以添加打字机效果
      setShowTypingCursor(false);
      setDisplayText(text);
    }
  }, [text, isStreaming]);

  return (
    <div className={`stream-text ${className}`}>
      <span className="whitespace-pre-wrap">{displayText}</span>
      {isStreaming && showCursor && (
        <span className="inline-flex items-center ml-1">
          <Spin size="small" />
        </span>
      )}
      {showTypingCursor && !isStreaming && showCursor && (
        <span className="animate-pulse">|</span>
      )}
    </div>
  );
};

export default StreamText; 